let username = document.getElementById("username");
let phone = document.getElementById("phone");
let password = document.getElementById("password");
let password2 = document.getElementById("password2");
let kanbuqing = document.getElementById("kanbuqing");
let yanzhengma = document.getElementById("yanzhengma");
let verify = document.getElementById("verify");

var server="http://101.43.149.52:8080/brand_crud"
//http://101.43.149.52:8080/brand_crud/verifyCode?method=getCode
//给看不清按钮绑定click事件
kanbuqing.addEventListener('click',function (){
    yanzhengma.src = server+'/verifyCode?method=getCode&t='+Math.random()
})


//前端验证
// 对用户名进行校验，合法的用户名是 4- 20位数字、英文字母、数字和字母的组合。
let usernameReg = /^[0-9A-Za-z]{4,20}$/; // 4- 20位数字与字母组合
//验证用户名是否满足“正则表达式”
function checkUsername() {
    return usernameReg.test(username.value)
}
// 对密码进行校验，合法的密码长度为6-16位。
let passwordReg = /^.{6,16}$/; //6-16位数字与字母组合
//检查密码是否满足正则
function checkPasswordReg() {
    return passwordReg.test(password.value)
}
//检查两次输入密码是否一致
function checkPasswordSame() {
    if(password.value === password2.value && password2.value != ""){
        return true;
    }else{
        return false;
    }
}


//功能函数：实现插入验证提示文字，或 插入验证结果的图片
//imageType：图片类型，-1为空（不创建img），0为fail，1为success
function verifyResultTip(element,msg,imageType){
    let tipsContainer = element.nextElementSibling; //input下一个兄弟span,用于放提示信息和图片
    //先清空原来的内容
    tipsContainer.innerHTML = '';
    //准备图片、文本的显示容器
    let img,em;
    //插入图片
    if(imageType!=-1){
        img = document.createElement('img');
        if (imageType==1){
            img.src='../images/success.png'
        }else if(imageType==0){
            img.src='../images/fail.png'
        }
        tipsContainer.appendChild(img);
    }
    //插入文本
    if(msg.length!=0){
        em = document.createElement('em');
        em.innerHTML = msg;
        if(imageType==1){
            em.style.color = '#666';
        }
        tipsContainer.appendChild(em);
    }
}
//用户名校验：blur/focus事件绑定
username.addEventListener('blur',function () {
    let result=checkUsername();
    if (result){
        //后端验证
        //前端校验通过，此时向后端
        let name=username.value
        axios({
            method:'GET',
            url:'http://101.43.149.52:8080/brand_crud/user',
            params:{
                method:'checkUsername',
                username:name
            }
        }).then(function (resp) {
            console.log(resp.data.result)
            if (resp.data.result ==='USERNAME_CAN_USE'){
                //名字能用
                // result.innerHTML='此名称可以使用'
                verifyResultTip(username,"此用户名可以使用",1)
                username.setAttribute('data-checked',1)
            }else{
                //名字不能用
                // result.innerHTML='此名称已存在，不可使用'
                verifyResultTip(username,"此用户名已使用",0)
                username.setAttribute('data-checked',0)
            }
        })

    // //前端验证
    // //校验通过：显示SUCCESS
    //     verifyResultTip(username,'用户名可以使用',1)
    // //在username上面添加自定义属性data-checked,如果
    //     username.setAttribute('data-checked',1)
    }else {
    //前端验证
    //校验不通过：显示AIL,文字：。。。。
        verifyResultTip(username,'用户名不符合规则',0)
    }
})

//手机号码校验
phone.addEventListener('blur',function () {
    let result1=checkPasswordReg();
    if (result1){
        //校验通过：显示SUCCESS
        verifyResultTip(phone,'手机号符合',1)
        //在username上面添加自定义属性data-checked,如果
        // username.setAttribute('data-checked',1)
    }else {
        //校验不通过：显示AIL,文字：。。。。
        verifyResultTip(phone,'手机号不符合',0)
    }
})

//密码校验：blur/focus事件绑定
password.addEventListener('blur',function () {
    let result1=checkPasswordReg();
    if (result1){
        //校验通过：显示SUCCESS
        verifyResultTip(password,'密码符合',1)
        //在username上面添加自定义属性data-checked,如果
        // username.setAttribute('data-checked',1)
    }else {
        //校验不通过：显示AIL,文字：。。。。
        verifyResultTip(password,'密码不符合',0)
    }
})
password2.addEventListener('blur',function () {
    let result2=checkPasswordSame();
    if (result2){
        //校验通过：显示SUCCESS
        verifyResultTip(password2,'密码一致',1)
        //在username上面添加自定义属性data-checked,如果
        // username.setAttribute('data-checked',1)
    }else {
        //校验不通过：显示AIL,文字：。。。。
        verifyResultTip(password2,'密码不一致',0)
    }
})

//验证码的后端校验
// 只要用户在文本框中输入，就会触发input事件
verify.addEventListener('input',function () {
    let yzm = verify.value
    console.log(yzm)
    if(yzm.length === 4){
        axios.defaults.withCredentials = true;
        axios({
            method:"GET",
            url:"http://101.43.149.52:8080/brand_crud/verifyCode",
            //请求参数：params、data
            params:{
                method:"checkCode",
                verify:yzm
            }
        }).then(function (resp) {
            //resp是服务器返回的响应数据
            //console.log(resp.data.result)
            if(resp.data.result === 'VERIFY_PASS'){
                //通过
                verifyResultTip(verify,"",1)
            }else{
                //失败
                verifyResultTip(verify,"",0)
            }
        })
    }
})

